<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <style>
        .header {
            top: 0;
            width: 100%;
            position: fixed;
        }

        .header div {
            float: left;
        }

        .header .logo {
            width: 200px;
            height: 60px;
            background-color: rgb(57, 61, 73);
            color: #Fff;
            text-align: center;
            font-size: 20px;
            line-height: 60px;
        }

        .header .menu {
            width: calc(100% - 200px);
        }

        .layui-nav {
            border-radius: 0px
        }

        .article {
            width: 100%;
        }

        .left {
            position: fixed;
            width: 200px;
            height: 100vh;
            background-color: rgb(57, 61, 73);
        }

        .right {
            margin-top: 60px;
            margin-left: 200px;
            padding: 15px;
            height: 100%;
        }

        #content {
            white-space: break-spaces;
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="logo">
            你们项目名字
        </div>
        <div class="menu">
            <ul class="layui-nav" lay-filter="">

            </ul>
        </div>

    </div>
    <div class="article">
        <div class="left">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">默认展开</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">选项1</a></dd>
                        <dd><a href="javascript:;">选项2</a></dd>
                        <dd><a href="">跳转</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">移动模块</a></dd>
                        <dd><a href="">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">产品</a></li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
            </ul>
        </div>
        <div class="right">
            <div id="content">12312312</div>
        </div>
    </div>

    <!-- <div id="content">12312312</div> -->

    <script>
        window.strimgTurnDom = function (txt) {
            try //Internet Explorer
            {
                xmlDoc = new ActiveXObject("Microsoft.HTMLDOM");
                xmlDoc.async = "false";
                xmlDoc.loadXML(txt);
                alert("ie");
                return (xmlDoc);
            }
            catch (e) {
                try //Firefox, Mozilla, Opera, etc.
                {
                    parser = new DOMParser();
                    xmlDoc = parser.parseFromString(txt, "text/html");
                    return (xmlDoc);
                }
                catch (e) { alert(e.message) }
            }
            return (null);
        }
        var alldata = []
        function renderhtml(res) {
            console.log(res)
            var data = alldata.filter(function (item) {
                return item.num == res;
            })
            data = data[0]
            res = data.html
            console.log(res)
            res = res ? res : '当前标签无内容'
            layui.use(['element', 'jquery'], function () {
                var element = layui.element;
                var $ = layui.jquery
                $("#content").html(res)
                element.init()
            })
        }
        //注意：导航 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'jquery'], function () {
            var element = layui.element;
            var $ = layui.jquery
            //…
            function renderdata(datalist) {
                let html = ''
                let silderhtml = ''
                let data = []
                let data_num = 0
                datalist.forEach((e, i) => {
                    let href = e.html ? e.html : 'javascript:;'
                    // let layui_this = i == 0 ? 'layui-this' : ''
                    let layui_this = ''
                    if (!e.children) {
                        data.push(Object.assign({ num: data_num }, e))
                        html += [
                            `<li class="layui-nav-item ${layui_this}">`,
                            `<a href="javascript:;" onclick="renderhtml('${data_num}')">${e.title}</a>`,
                            `</li>\n`
                        ].join("")
                        // silderhtml+= `<li class="layui-nav-item"><a href="javascript:;" onclick="renderhtml('${data_num}')">${e.title}</a></li>`
                        data_num++
                    } else {
                        data.push(Object.assign({ num: data_num }, e))
                        html += [
                            `<li class="layui-nav-item ${layui_this}">`,
                            `<a href="javascript:;">${e.title}</a>`,
                            `<dl class="layui-nav-child">\n`
                        ].join("")
                        data_num++
                        e.children.forEach(ele => {
                            data.push(Object.assign({ num: data_num }, ele))
                            let children_html = ele.html ? ele.html : 'javascript:;'
                            html += [`<dd><a href="javascript:;" onclick="renderhtml('${data_num}')">${ele.title}</a></dd>\n`].join("")
                            data_num++
                        })
                        html += [`</dl></li>\n`]
                    }
                })
                alldata = data
                return html
            }
            $.get('data.json', function (res) {
                console.log(res)
                let datalist = res
                var needhtml = renderdata(datalist)
                $(".menu .layui-nav").html(needhtml)
                $(".layui-nav.layui-nav-tree").html(needhtml)
                element.init();
            })
        });


    </script>
</body>

</html>